<template>
    <div>
        <header>
            <div class="ls-card">
                <el-page-header @back="$router.go(-1)" :content="$t('订单详情')" />
            </div>

            <!-- 头部 -->
            <div class="flex m-t-24">

                <!-- 订单信息 -->
                <div class="ls-card flex flex-wrap col-stretch" style="height: 450px">
                    <div style="width: 100%">
                        <div class="nr weight-500 m-b-20 title">{{$t('订单信息')}}</div>

                        <div class="flex col-top">
                            <el-form ref="form" :model="orderData" label-width="120px" size="small">
                                <el-form-item :label="$t('订单状态')">
                                    {{orderData.order_status_desc}}
                                </el-form-item>
                                <el-form-item :label="$t('订单编号')">
                                    {{orderData.sn}}
                                </el-form-item>
                                <el-form-item :label="$t('订单类型')">
                                    {{orderData.order_type_desc}}
                                </el-form-item>
                                <el-form-item :label="$t('订单来源')">
                                    {{orderData.order_terminal_desc}}
                                </el-form-item>
                                <el-form-item :label="$t('下单时间')">
                                    {{orderData.create_time}}
                                </el-form-item>

                            </el-form>
                            <el-form ref="form" style="margin-left: 20vw" :model="orderData" label-width="120px"
                                size="small">

                                <el-form-item :label="$t('支付状态')">
                                    {{orderData.pay_status_desc}}
                                </el-form-item>
                                <el-form-item :label="$t('支付方式')">
                                    {{orderData.pay_way_desc}}
                                </el-form-item>
                                <el-form-item :label="$t('支付时间')">
                                    {{orderData.pay_time}}
                                </el-form-item>
                                <el-form-item :label="$t('完成时间')">
                                    {{orderData.confirm_take_time}}
                                </el-form-item>
                                <el-form-item :label="$t('用户备注')">
                                    {{orderData.user_remark}}
                                </el-form-item>
                                <el-form-item :label="$t('商家备注')">
                                    {{orderData.order_remarks}}
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>

                    <div class="flex col-bottom" style="width:100%">
                        <div class="border-top flex col-bottom row-left p-t-24" style="width:100%;height:57px">
                            <!-- 取消订单 -->
                            <ls-dialog :title="$t('取消订单')" class="inline m-l-24" v-if="orderData.admin_order_btn.cancel_btn"
                                :content="`${$t('确定取消订单(${orderData.sn})吗?请谨慎操作')}`" @confirm="orderCancel">
                                <el-button slot="trigger" size="small" style="primary">{{$t('取消订单')}}</el-button>
                            </ls-dialog>

                            <!-- 提货核销 -->
                            <ls-dialog :title="$t('提货核销')" class="inline m-l-24" v-if="orderData.admin_order_btn.verification_btn"
                                :content="`${$t('确定核销订单(${orderData.sn})吗?请谨慎操作')}`" @confirm="selffetch">
                                <el-button slot="trigger" size="small" type="primary">{{$t('提货核销')}}</el-button>
                            </ls-dialog>

                            <!-- 商家备注 -->
                            <ls-dialog :title="$t('商家备注')" class="inline m-l-24" v-if="orderData.admin_order_btn.remark_btn"
                                @confirm="postOrderRemarks">
                                <el-button slot="trigger" size="small" style="primary">{{$t('商家备注')}}</el-button>
                                <div>
                                    <span class="m-b-10">{{$t('商家备注')}}</span>
                                    <el-input class="m-t-10" type="textarea" :rows="5" :placeholder="$t('请输入内容')"
                                        v-model="remarks">
                                    </el-input>
                                </div>
                            </ls-dialog>

                            <!-- 物流查询 -->
                            <order-logistics class="m-l-24" v-if="orderData.admin_order_btn.logistics_btn" :flag="false"
                                :id="id">
                                <el-button slot="trigger" size="small" type="primary">{{$t('物流查询')}}</el-button>
                            </order-logistics>

                            <!-- 订单发货 -->
                            <order-logistics class="m-l-24" @update="getOrderDetail" :flag="true" :id="id"
                                v-if="orderData.admin_order_btn.deliver_btn">
                                <el-button slot="trigger" size="small" type="primary">{{$t('发货')}}</el-button>
                            </order-logistics>

                            <!-- 取消订单 -->
                            <ls-dialog class="inline m-l-24" :title="$t('确认收货')" :content="`确定$t('确认收货')吗?请谨慎操作`" @confirm="orderConfirm"
                                v-if="orderData.admin_order_btn.confirm_btn">
                                <el-button slot="trigger" size="small" type="primary">{{$t('确认收货')}}</el-button>
                            </ls-dialog>
                        </div>
                    </div>
                </div>

            </div>
        </header>

        <section>
            <!-- 用户及收货信息 -->
            <div class="ls-card m-t-24 flex flex-wrap col-stretch" style="height: auto">
                <div style="width: 100%">
                    <div class="nr weight-500 m-b-20 title">{{$t('买家信息')}}</div>
                    <el-form ref="form" :model="orderData" label-width="120px" class="flex" size="small">
                        <el-form-item :label="$t('买家昵称')">
                            <div class="username pointer" @click="toUserDetail()">
                                {{orderData.nickname}}（{{orderData.user_sn}}）</div>
                        </el-form-item>
                    </el-form>
                </div>
            </div>

            <!-- 用户及收货信息 -->
            <div class="ls-card m-t-24 flex flex-wrap col-stretch" style="height: auto">
                <div style="width: 100%">
                    <div class="nr weight-500 m-b-20 title">{{orderData.delivery_type==1?'用户及收货信息':'提货信息'}}</div>

                    <div class="flex col-top">
                        <el-form ref="form" :model="orderData" label-width="120px" size="small">
                            <el-form-item :label="$t('配送方式')">
                                {{orderData.delivery_type_desc}}
                            </el-form-item>
                            <el-form-item :label="orderData.delivery_type==1?'收货人':'提货人'">
                                {{orderData.contact}}
                            </el-form-item>
                            <el-form-item :label="$t('手机号码')">
                                {{orderData.mobile}}
                            </el-form-item>
                            <el-form-item :label="orderData.delivery_type==1?'收货地址':'提货地址'">
                                {{orderData.delivery_address}}
                            </el-form-item>
                        </el-form>

                        <el-form ref="form" :model="orderData" style="margin-left:15vw" label-width="120px"
                            size="small">
                            <el-form-item :label="$t('发货状态')" v-if="orderData.delivery_type==1">
                                {{orderData.express_status_desc}}
                            </el-form-item>
                            <el-form-item :label="$t('物流公司')" v-if="orderData.delivery_type==1">
                                {{orderData.express_name}}
                            </el-form-item>
                            <el-form-item :label="$t('快递单号')" v-if="orderData.delivery_type==1">
                                {{orderData.invoice_no}}
                            </el-form-item>
                            <el-form-item :label="$t('发货时间')" v-if="orderData.delivery_type==1">
                                {{orderData.express_time}}
                            </el-form-item>

                            <el-form-item :label="$t('核销状态')" v-if="orderData.delivery_type==2">
                                {{orderData.verification_time==null?'待核销':'已核销'}}
                            </el-form-item>
                            <el-form-item :label="$t('核销码')" v-if="orderData.delivery_type==2">
                                {{orderData.pickup_code}}
                            </el-form-item>
                            <el-form-item :label="$t('提货时间')" v-if="orderData.delivery_type==2">
                                {{orderData.verification_time}}
                            </el-form-item>

                        </el-form>
                    </div>
                </div>

                <div class="flex col-bottom" style="width:100%" v-if="orderData.admin_order_btn.address_btn">
                    <div class="border-top flex col-bottom row-left p-t-24" style="width:100%;height:57px">
                        <!-- 修改地址 -->
                        <ls-dialog class="inline m-l-24" :title="`' ${$t('收货地址修改')}} '`" width="35vw" @confirm="orderAddressSet()">
                            <el-button slot="trigger" size="small" style="primary">{{$t('修改地址')}}</el-button>

                            <div class="flex row-center">
                                <el-form ref="address" :model="address" label-width="80px">
                                    <el-form-item :label="$t('地区')" prop="return_district">
                                        <area-select width="280px" :province.sync="address.province_id"
                                            :city.sync="address.city_id" :district.sync="address.district_id" />
                                    </el-form-item>
                                    <el-form-item :label="$t('详细地址')" prop="return_address">
                                        <el-input class="ls-input" v-model="address.address" show-word-limit />
                                    </el-form-item>
                                </el-form>
                            </div>
                        </ls-dialog>
                    </div>
                </div>
            </div>

            <!-- 商品信息 -->
            <div class="ls-card m-t-24 ">
                <div class="nr weight-500 m-b-20 title">{{$t('商品信息')}}</div>

                <el-table :data="orderData.order_goods" :header-cell-style="{
                    background: '#f5f8ff',
                    border: 'none',
                    color: '#666666',
                    height: '60px',
                    width: '100%'
                }" ref="paneTable" style="width: 100%" size="mini" :summary-method="getSummaries"
                    :show-summary="true">
                    <el-table-column :label="$t('商品信息')" min-width="460">
                        <template slot-scope="scope">
                            <div class="flex m-t-10">
                                <el-image :src="scope.row.goods_image" style="width: 58px; height: 58px"
                                    class="flex-none">
                                </el-image>
                                <div class="m-l-8 flex-1">
                                    <div class="line-2">
                                        {{scope.row.goods_name}}
                                    </div>
                                    <div class="xs muted">
                                        {{scope.row.spec_value_str}}
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <!-- 商品价格改价 -->
                    <el-table-column prop="goods_price" :label="$t('商品价格')" min-width="180">
                        <template slot-scope="scope">
                            <span>¥{{scope.row.goods_price}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="goods_num" :label="$t('购买数量')" min-width="180"></el-table-column>
                    <el-table-column :label="$t('商品总额')" prop="total_price" min-width="180">
                        <template slot-scope="scope">
                            <span>¥{{scope.row.total_price}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('优惠金额')" prop="discount_price" min-width="180">
                        <template slot-scope="scope">
                            <span>¥{{scope.row.discount_price}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('商品改价')" prop="change_price" min-width="180">
                        <template slot-scope="scope">
                            <span>-¥{{scope.row.change_price}}</span>
                            <el-popover placement="top" v-if="orderData.admin_order_btn.price_btn" title="" width="300"
                                trigger="hover">
                                <i class="el-icon-edit primary m-l-30 lg" slot="reference"></i>

                                <div class="flex">
                                    <el-input v-model="goods_price" class="m-r-24" style="width:188px"
                                        :placeholder="$t('请输入商品价格')"></el-input>
                                    <el-button class="m-l-24" size="small" type="primary"
                                        @click="orderChangeGoodsPrice(scope.row.id)">{{$t('修改价格')}}</el-button>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('商品实付总额')" prop="total_pay_price" min-width="180">
                        <template slot-scope="scope">
                            ¥{{scope.row.total_pay_price}}
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 金额明细 -->
            <div class="ls-card m-t-24">
                <div class="nr weight-500 m-b-20 title">{{$t('金额明细')}}</div>

                <el-form ref="form" :model="orderData" label-width="160px" size="small">
                    <el-form-item :label="$t('商品总额')">
                        ¥{{orderData.total_goods_price}}
                    </el-form-item>
                    <el-form-item :label="$t('商品改价')">
                        -¥{{orderData.change_price||0}}
                    </el-form-item>
                    <el-form-item :label="$t('优惠金额')">
                        -¥{{orderData.discount_amount}}
                    </el-form-item>
                    <el-form-item :label="$t('商品运费')">
                        +¥{{orderData.express_price}}

                        <el-popover v-if="orderData.admin_order_btn.express_btn" placement="top" title="" width="300"
                            trigger="hover">
                            <i class="el-icon-edit primary m-l-30 lg" slot="reference"></i>

                            <div class="flex">
                                <el-input v-model="express_price" class="m-r-24" style="width:188px"
                                    :placeholder="$t('请输入运费')"></el-input>
                                <el-button class="m-l-24" size="small" type="primary" @click="orderChangeExpress">
                                    {{$t('修改运费')}}
                                </el-button>
                            </div>
                        </el-popover>
                    </el-form-item>
                    <el-form-item :label="$t('商品实付金额')">
                        ¥{{orderData.order_amount}}
                    </el-form-item>
                </el-form>
            </div>
        </section>

        <footer class="flex col-top">

            <!-- 订单日志 -->
            <div class="ls-card m-t-24">
                <div class="nr weight-500 m-b-20 title">{{$t('订单日志')}}</div>

                <el-table :data="orderData.order_log" ref="paneTable" style="width: 100%" size="mini">
                    <el-table-column :label="$t('操作人')" prop="operator" width="155"></el-table-column>
                    <el-table-column prop="channel_desc" :label="$t('操作事件')" min-width="220"></el-table-column>
                    <el-table-column prop="create_time" :label="$t('操作时间')" min-width="180"></el-table-column>
                </el-table>
            </div>
        </footer>
    </div>
</template>

<script lang="ts">

 import  i18n from '@/plugins/i18n' 
import { Component, Vue } from "vue-property-decorator";
import LsDialog from "@/components/ls-dialog.vue";
import AreaSelect from "@/components/area-select.vue";
import OrderLogistics from "@/components/order/order-logistics.vue";
import {
    apiOrderDetail,
    apiOrderChangeExpressPrice,
    apiOrderRemarks,
    apiOrderConfirm,
    apiOrderCancel,
    apiOrderChangeGoodsPrice,
    apiOrderAddressEdit,
} from "@/api/order/order";
import {apiSelffetchVerification} from "@/api/marketing/selffetch"
@Component({
    components: {
        LsDialog,
        AreaSelect,
        OrderLogistics,
    },
})
export default class OrderDetail extends Vue {
    // S Data

    // 订单详情ID
    id: any = 0;

    // 订单数据
    orderData: any = {
        admin_order_btn: {
            remark_btn: 1,
            cancel_btn: 0,
            confirm_btn: 0,
            logistics_btn: 0,
            refund_btn: 0,
            address_btn: 1,
            price_btn: 1,
        },
    };

    address: any = {
        province_id: "", //必填	int	所在地区:省id
        city_id: "", //必填	int	所在地区:市id
        district_id: "", //必填	int	所在地区:区id
        address: "", //必填	varchar	详细地址
    };

    // 商家备注
    remarks: String = "";

    // 运费更改
    express_price: String = "";

    // 商品价格
    goods_price: String = "";

    // E Data

    // S Methods
    // 获取订单详情
    getOrderDetail() {
        apiOrderDetail({ id: this.id }).then((res) => {
            this.orderData = res;
        });
    }

    // 取消订单
    orderCancel() {
        apiOrderCancel({ id: this.id }).then((res) => {
            this.getOrderDetail();
        });
    }

    // 提货核销
    selffetch() {
        apiSelffetchVerification({id: this.id}).then(() => {
            this.getOrderDetail();
        })
    }

    // 订单地址修改
    orderAddressSet() {
        apiOrderAddressEdit({
            id: this.id,
            ...this.address,
        }).then((res) => {
            this.getOrderDetail();
        });
    }

    // 确认收货
    orderConfirm() {
        apiOrderConfirm({ id: this.id }).then((res) => {
            this.getOrderDetail();
        });
    }

    // 商家备注
    postOrderRemarks() {
        apiOrderRemarks({
            id: [this.id],
            order_remarks: this.remarks,
        }).then((res) => {
            this.getOrderDetail();
        });
    }

    // 修改商品价格
    orderChangeGoodsPrice(id: Number) {
        if (this.goods_price == "") return this.$message.error(i18n.t('请输入价格'));
        apiOrderChangeGoodsPrice({
            order_goods_id: id,
            change_price: this.goods_price,
        }).then((res) => {
            this.getOrderDetail();
            this.goods_price = "";
        });
    }

    // 修改运费
    orderChangeExpress() {
        if (this.express_price == "")
            return this.$message.error(i18n.t('请输入运费！'));
        apiOrderChangeExpressPrice({
            id: this.id,
            express_price: this.express_price,
        }).then((res) => {
            this.getOrderDetail();
        });
    }
    // 商品信息的底部结算信息
    getSummaries(param: any) {
        const { columns, data } = param;
        const sums: any = [];
        columns.forEach((column: any, index: any) => {
            if (index === 0) {
                sums[0] =`" ${$t('总价')}} "`;
                return;
            }
            const values = data.map((item: any) =>
                Number(item[column.property])
            );
            if (!values.every((value: any) => isNaN(value))) {
                if (index == 1) return;
                sums[index] = values.reduce((prev: any, curr: any) => {
                    const value = Number(curr);
                    if (!isNaN(value)) {
                        return prev + curr;
                    } else {
                        return prev;
                    }
                }, 0);
                if (index !== 2) {
                    sums[index] = "¥" + sums[index];
                }
                if (index == 5) {
                    sums[index] = "-" + sums[index];
                }
                if(index == 6) {
                    sums[index] = "¥" + this.orderData.total_goods_pay_price
                }
            }
        });

        return sums;
    }

    toUserDetail() {
        this.$router.push({
            path: "/user/user_details",
            query: {
                id: this.orderData.user_id,
            },
        });
    }

    // E Methods

    created() {
        this.id = this.$route.query.id;
        this.id && this.getOrderDetail();
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form .el-form-item {
    margin-bottom: 12px !important;
}

::v-deep .el-table__footer-wrapper tbody td {
    background: #fff !important;
}

::v-deep .el-table__footer-wrapper td {
    // border: 0;
}

::v-deep .el-table--border::after,
.el-table::before {
    position: static;
}

.username:hover {
    color: $--color-primary;
}

.title {
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 1px solid #f2f2f2;
}
</style>
